<html>

<head>
  <title>点、线、网格模型介绍</title>
  <style>
    body {
      margin: 0;
    }

    canvas {
      display: block;
    }
  </style>
</head>

<body>
  <script src="./js/three.js"></script>
  <script src="./js/OrbitControls.js"></script>
  <script>
    // 1、创建场景
    var scene = new THREE.Scene();

    //创建一个球体几何对象
    // var geometry = new THREE.SphereGeometry(100, 25, 25);
    // ==============================================================================================================
    // 材质对象
    // var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    // 网格模型对象Mesh
    // var cube = new THREE.Mesh(geometry, material);
    // scene.add(cube);

    // ==============================================================================================================
    // 点模型Points
    // 点模型Points就是几何体的每一个顶点数据渲染为一个方形区域，方形区域的大小可以设置。
    // var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
    // 点渲染模式
    // var material = new THREE.PointsMaterial({
    //   color: 0xff0000,
    //   size: 5.0 //点对象像素尺寸
    // }); //材质对象
    // var cube = new THREE.Points(geometry, material); //点模型对象
    // scene.add(cube);

    // ==============================================================================================================
    // 线模型Line
    // 线模型除了Line还有LineLoop和LineSegments,LineLoop和Line区别是连线的时候会闭合把第一个顶点和最后一个顶点连接起来，LineSegments则是顶点不共享，第1、2点确定一条线，第3、4顶点确定一条直线，第2和3点之间不连接。
    // var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
    // 线条渲染模式
    // var material = new THREE.LineBasicMaterial({
    //   color: 0xff0000 //线条颜色
    // });//材质对象
    // 创建线模型对象   构造函数：Line、LineLoop、LineSegments
    // var cube = new THREE.Line(geometry, material);//线条模型对象
    // scene.add(cube);

    // ==============================================================================================================
    // 网格模型Mesh
    // 三个顶点确定一个三角形，网格模型Mesh默认的情况下，通过三角形面绘制渲染几何体的所有顶点，通过一系列的三角形拼接出来一个曲面。
    // 如果设置网格模型的wireframe属性为true，所有三角形会以线条形式绘制出来。开发的时候可以通过设置wireframe属性来查看网格模型的三角形分布特点。
    var geometry = new THREE.BoxGeometry(100, 100, 100);
    // 三角形面渲染模式  
    var material = new THREE.MeshLambertMaterial({
      color: 0x0000ff, //三角面颜色
      wireframe:true,//网格模型以线条的模式渲染
    }); //材质对象
    var cube = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(cube);






    // 3、光源设置：
    //环境光    环境光颜色与网格模型的颜色进行RGB进行乘法运算
    var ambient = new THREE.AmbientLight('#444444');
    scene.add(ambient);

    //点光源  
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300);
    scene.add(point);


    // 4、添加相机
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.z = 5;
    //设置相机位置
    camera.position.set(200, 300, 200);
    //设置相机方向(指向的场景对象)
    camera.lookAt(scene.position);


    // 5、创建渲染器对象
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement);

    // 6、执行渲染操作
    var animate = function () {
      renderer.render(scene, camera);
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
    };
    animate();
    var controls = new THREE.OrbitControls(camera);//创建控件对象
  </script>
</body>

</html>